<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <!-- 上拉加载 -->
      <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad">
        <van-cell v-for="(item, idx) in list" :key="idx" :title="item.title" @click="$router.push('/article/' + item.art_id.toString())">
          <div slot="label">
            <!-- 图片区域 -->
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>
            <!-- 文字部分 -->
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate | relativeTime}}</span>
              <!-- 添加更多操作按钮 -->
              <span class="close" v-if="$store.state.token">
                <van-icon name="cross" @click="showMoreAction"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticle } from '@/api/article.js'
export default {
  name: 'article-list',
  props: ['channel'],
  data () {
    return {
      articleList: '',
      // 列表数据
      list: [],
      // 时间戳
      timestapm: null,
      // 下拉刷新
      isLoadingNew: false,
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created () {
    // console.log('articleList被创建了', Date.now())
    // console.log(this.channel, Date.now())
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const result = await getArticle(this.channel.id, this.timestamp)
      // console.log(result)
      // 保存本次请求回来的数据中的时间戳，以便下次传入
      this.timestamp = result.data.data.pre_timestamp
      // 1. - 把数据追加到list中（list的内容会越来越多）
      const arr = result.data.data.results
      // arr就是本次取回来的数据，就是一个数组，其中每一个元素都是一个对象，表示一篇文章。
      this.list = this.list.concat(arr)
      // 2. - 把loading手动设置为false
      this.loading = false
      // 3. - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // 传入最新的时间戳
      const result = await getArticle(this.channel.id, Date.now())
      // 获取文章数据
      const arr = result.data.data.results
      // 将得到的文章数据添加到原有数组当中
      this.list = arr.concat(this.list)
      // 成功提示
      this.$toast.success('刷新成功,新增' + arr.length + '条')
      this.isLoadingNew = false
    },
    // 通知父组件 显示弹层
    showMoreAction () {
      this.$emit('showMoreAction')
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display:flex;
  span {
    margin-right: 10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
